import React, { useState, useEffect } from 'react';
import commonStyle from '@/pages/publicStyle';
import './index.less';
import { AutoComplete, Tree, Tabs } from 'antd';
import type { DataNode, TreeProps } from 'antd/lib/tree';
import { sendSearchOrganizationData } from '@/services/index';
import {
  EditOutlined,
  MinusCircleOutlined, //圆形加减上下
  PlusCircleOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
} from '@ant-design/icons';
import { relevancyAttSplit, findItemOperation } from '@/untils';
import { TreeItem } from './index.d';
import Three from './three';
import FunThree from './funThree';
Three.defaultProps = {
  maxLength: 6,
};

const { mr20, mt20 } = commonStyle;
const { TabPane } = Tabs;

const mockVal = (str: string, repeat = 1) => ({
  value: str.repeat(repeat),
});
export default function Organization() {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const [treeData, setTreeData] = useState<TreeItem[]>([]);
  const [showDetailedInfo, setShowDetailedInfo] = useState(true);
  const [selectCheckedDetail, setSelectCheckedDetail] = useState('');

  const onSearch = (searchText: string) => {
    setOptions(
      !searchText
        ? []
        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
    );
  };

  const onSelect = (data: string) => {
    console.log('onSelect', data);
  };

  const autoCompleteChange = (data: string) => {
    setValue(data);
  };
  //
  const toSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    selectedKeys.length
      ? setSelectCheckedDetail(info.node.desc)
      : setSelectCheckedDetail(''); //选中时候有信息  为空时候情况
  };

  useEffect(() => {
    sendSearchOrganizationData().then((res) => {
      res.data.forEach((item: TreeItem, index: number) => {
        item.key = item.organId;
        item.showIcon = false;
        item.idx = index;
        item.title = (e: TreeItem) => {
          return (
            <div className="organization-left-row">
              <span>{item.organName}</span>
              <span
                className="organization-left-row-icon"
                style={!item.showIcon ? { display: 'none' } : {}}
              >
                <EditOutlined />
                <MinusCircleOutlined />
                <PlusCircleOutlined />
                {item.showChildren && <UpCircleOutlined />}
                {item.showChildren && <DownCircleOutlined />}
              </span>
            </div>
          );
        };
      });

      const newData = relevancyAttSplit(
        res.data,
        'organId',
        'parentId',
        (item: TreeItem) => {
          item.children?.forEach((ii) => {
            if (item.children!.length > 1) {
              ii.showChildren = true;
            } else {
              ii.showChildren = false;
            }
          });
        },
      );

      setTreeData(newData);
    });
  }, []);

  function treeItemEnter(e: { node: TreeItem }) {
    const {
      node: { idx },
    } = e;

    const newTreeData = findItemOperation(
      treeData,
      'children',
      'idx',
      idx,
      (item: TreeItem) => {
        item.showIcon = true;
        item.title = (e: TreeItem) => {
          return (
            <div className="organization-left-row">
              <span>{item.organName}</span>
              <span
                className="organization-left-row-icon"
                style={!item.showIcon ? { display: 'none' } : {}}
                onClick={(e) => {
                  e.stopPropagation();
                }}
              >
                <EditOutlined />
                <MinusCircleOutlined />
                <PlusCircleOutlined />
                {item.showChildren && (
                  <UpCircleOutlined onClick={handleAddTree} />
                )}
                {item.showChildren && <DownCircleOutlined />}
              </span>
            </div>
          );
        };
        return item;
      },
    );
    // console.log(idx, 'enter', newTreeData);

    setTreeData(newTreeData);
    console.log(treeData);
  }
  function handleAddTree(e) {
    e.stopPropagation(); //阻止冒泡
  }
  function treeItemLeave(e) {
    const {
      node: { idx },
    } = e;

    const newTreeData = findItemOperation(
      treeData,
      'children',
      'idx',
      idx,
      (item: TreeItem) => {
        item.showIcon = false;
        item.title = (e: TreeItem) => {
          return (
            <div className="organization-left-row">
              <span>{item.organName}</span>
              <span
                className="organization-left-row-icon"
                style={!item.showIcon ? { display: 'none' } : {}}
              >
                <EditOutlined />
                <MinusCircleOutlined />
                <PlusCircleOutlined />
                {item.showChildren && <UpCircleOutlined />}
                {item.showChildren && <DownCircleOutlined />}
              </span>
            </div>
          );
        };
        return item;
      },
    );
    // console.log(idx, 'leaven', newTreeData);

    setTreeData(newTreeData);
  }

  return (
    <div className="organization">
      <div className="organization-left">
        <p>
          <span style={mr20}>组织架构管理 </span> <a>添加一级</a>
        </p>

        <AutoComplete
          options={options}
          style={{ width: 200 }}
          onSelect={onSelect}
          onSearch={onSearch}
          onChange={autoCompleteChange}
          placeholder="input here"
        />
        <Tree
          style={mt20}
          // defaultExpandedKeys={['001']}
          // defaultSelectedKeys={['001']}
          showLine={{ showLeafIcon: false }}
          onSelect={toSelect}
          treeData={treeData}
          // blockNode
          onMouseEnter={treeItemEnter}
          onMouseLeave={treeItemLeave}
        />
      </div>
      {selectCheckedDetail.length > 0 && (
        <div className="organization-right">
          <Tabs>
            <TabPane tab="基本信息" key="1">
              {selectCheckedDetail}
            </TabPane>
          </Tabs>
        </div>
      )}
    </div>
  );
}
